<template>
  <ElCard shadow="never">
    <CEDiaForm :fields="fields" ref="dialogRef" />
    <ElButton @click="openDiaForm">打开</ElButton>
    {{ color }}
    <br />
    <p>按钮</p>
    <CEA @click="successClick">成功</CEA>
    <CEA type="danger" @click="del" />
    <div style="margin-top: 20px">
      <ColorPicker v-model="color" />
    </div>
    <CEForm
      :fields="searchFields"
      :inline="true"
      :formValue="formValue"
      @search="search"
    />

    <!-- 封装单向数据流组件 -->
    <p>单项数据流</p>
    <Search v-model="modelData" />
  </ElCard>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { fields, searchFields, showMsg } from './config'
import Search from './Search.vue'

const dialogRef = ref()
const formValue = ref<any>({})
const modelData = ref({
  sex: 1,
  keyword: ''
})

const color = ref()

onMounted(() => {
  const findObj = fields.find((x) => x.key === 'sex')
  if (findObj && findObj.on)
    findObj.on.change = (val: number) => selectChange(val)
})

const selectChange = (val: number) => {
  if (val === 1) {
    showMsg.value = false
  } else {
    showMsg.value = true
  }
}

const successClick = () => {
  console.log('1')
}
const del = () => {
  console.log('del')
}

const search = (query: any) => {
  console.log(query, '---')
}

const openDiaForm = () => {
  dialogRef.value.show(0)
}
</script>

<style scoped></style>
